<script setup lang="ts">
import { useInitTable, useInitForm } from '@/composables/useCommon'
import { reqManagerList, reqUpdateManagerStatus, reqAddManager, reqUpdateManager, reqDeleteManager } from '@/api/users'
import FormDrawer from '@/components/FormDrawer.vue'

const roles = ref<{ id: number; name: string }[]>([])
const {
  query,
  searchFormRef,
  handleReset,
  tableData,
  loading,
  currentPage,
  pageSize,
  total,
  getData,
  handleStatusChange,
  handleDelete
} = useInitTable({
  query: { keyword: '', limit: 10 },
  getList: reqManagerList,
  delete: reqDeleteManager,
  updateStatus: reqUpdateManagerStatus,
  onGetListSuccess: (res: any) => {
    tableData.value = res.data.list.map((item: any) => {
      // 增加状态切换时加载状态
      item.statusLoading = false
      return item
    })
    roles.value = res.data.roles
  }
})

const { formDrawerRef, formRef, drawerTitle, form, rules, handleSubmit, handleAdd, handleEdit } = useInitForm({
  getData,
  update: reqUpdateManager,
  create: reqAddManager,
  initialForm: {
    username: '',
    password: '',
    role_id: null,
    status: 1,
    avatar: ''
  },
  rules: {
    username: [{ required: true, message: '用户名不能空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能空', trigger: 'blur' }],
    role_id: [{ required: true, message: '所属角色不能空', trigger: 'blur' }]
  }
})
</script>

<template>
  <el-card shadow="never" style="border: 0; margin: 10px">
    <div style="margin: 10px">
      <el-form ref="searchFormRef" :inline="true" :model="query">
        <el-row :gutter="20">
          <el-col :span="4" :offset="0">
            <el-form-item label="关键词">
              <el-input v-model="query.keyword" placeholder="请输入搜索内容" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-form-item>
              <el-button type="primary" icon="search" @click="getData">搜索</el-button>
              <el-button type="default" icon="eleme" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="5">
            <el-button type="success" icon="plus" @click="handleAdd">新增</el-button>
          </el-col>
          <el-col :span="2" :offset="0">
            <el-tooltip effect="dark" content="刷新数据" placement="top">
              <el-button icon="refresh" @click="getData">刷新数据</el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column label="管理员" width="200" align="center">
        <template #default="{ row }">
          <div class="name">
            <el-avatar :src="row.avatar" :size="40" style="margin-right: 10px">
              <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </el-avatar>
            <div class="username">
              <h6>{{ row.username }}</h6>
              <small>ID:{{ row.id }}</small>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="所属角色" width="200" align="center">
        <template #default="{ row }">
          {{ row.role?.name || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200" align="center">
        <template #default="{ row }">
          <el-switch
            :modelValue="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusChange(row, $event)"
            :loading="row.statusLoading"
            :disabled="row.super == 1"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="create_time" width="380" align="center"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template #default="{ row }">
          <small v-if="row.super == 1" style="color: #999">无操作</small>
          <div v-else>
            <el-button size="small" type="primary" icon="edit" @click="handleEdit(row)">编辑</el-button>
            <el-popconfirm title="是否确认要删除吗?" width @confirm="handleDelete(row.id)">
              <template #reference>
                <el-button size="small" type="danger" icon="delete">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="getData"
      ></el-pagination>
    </div>
    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit(currentPage || 1)">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" clearable></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <ChooseImage v-model="form.avatar" />
        </el-form-item>
        <el-form-item label="所属角色" prop="role_id">
          <el-select v-model="form.role_id" placeholder="请选择">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>
    </FormDrawer>
  </el-card>
</template>

<style lang="scss" scoped>
.name {
  display: flex;
  align-items: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
</style>
